import React from 'react';
import { XMarkIcon } from '@heroicons/react/24/outline';
import Cubox from '../cubic-ui/cubox';

const CuboxModal = ({
  isOpen,
  onClose,
  title,
  children,
  size = 'md',
  cornerRadius = 16,
  strokeWidth = 1,
  isOutlined = false,
  ...props
}) => {
  if (!isOpen) return null;

  const sizeClasses = {
    sm: { width: 320, height: 'auto', minHeight: 200 },
    md: { width: 384, height: 'auto', minHeight: 300 },
    lg: { width: 500, height: 'auto', minHeight: 400 },
    xl: { width: 600, height: 'auto', minHeight: 500 }
  };

  const currentSize = sizeClasses[size];

  return (
    <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 flex items-center justify-center p-4">
      <Cubox
        cornerRadius={cornerRadius}
        strokeWidth={strokeWidth}
        isOutlined={isOutlined}
        backColor="#ffffff"
        foreColor="#e5e7eb" // gray-200
        className="shadow-lg"
        style={currentSize}
      >
        <div className="p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-medium text-gray-900">{title}</h3>
            <button
              onClick={onClose}
              className="text-gray-400 hover:text-gray-600 transition-colors duration-200 p-1"
            >
              <XMarkIcon className="h-5 w-5" />
            </button>
          </div>
          {children}
        </div>
      </Cubox>
    </div>
  );
};

export default CuboxModal; 